<template>
  <form-dialog
    :title="title()"
    :visible="visible"
    @handleClose="handleClose"
    width="25%"
  >
    <template #content>
      <p>{{content()}}</p>
      <ul class="form-ul" v-if="type === 'desktop_user'">
        <li v-for="item in itemList" :key="item.id">{{item.name}}</li>
      </ul>
      <ul class="form-ul" v-if="type === 'system_manager'">
        <li v-for="item in itemList" :key="item.id">{{item.username}}</li>
      </ul>
      <ul class="form-ul" v-if="type === 'tenant_manager'">
        <li v-for="item in itemList" :key="item.id">{{item.name}}</li>
      </ul>
      <el-form ref="form" :model="formData" :rules="formRule">
        <el-form-item :label="$t('resource.DeletePassword')" prop="password" label-width="80px">
          <el-input type="password" v-model="formData.password" show-password @keyup.enter.native="submit" :placeholder="$t('common.passwordDeletePlaceholder')"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue';
import FormDialog from '../../../components/Dialog/formDialog.vue';
import { AuthModule } from '../../../store/modules/auth';
export default Vue.extend({
  components: { FormDialog },
  computed: {
  },
  props: {
    deleteMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      type: '',
      itemList: [],
      formData: {
        password: ''
      },
      formRule: {
        password: [
          { required: true, message: (this as any).$t('resource.deletePasswordRequired'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            (this as any).$systemTunnyApi.checkPassword(value).then((result: any) => {
              console.log("checkPassword", value, result);
              if (result.check_password_flag) {
                return callback();
              } else {
                return callback(new Error((this as any).$t('resource.deletePasswordCheckFailed')));
              }
            }).catch(() => {
              return callback(new Error((this as any).$t('resource.deletePasswordCheckFailed')));
            });
          }, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(option: any) {
      console.log(option);
      this.formData.password = '';
      (this as any).itemList = option.itemList;
      (this as any).type = option.type;
      (this as any).visible = true;
      this.$nextTick(() => {
        (this as any).$refs['form'].clearValidate();
      })
    },
    content() {
      switch((this as any).type) {
        case 'desktop_user': 
          return (this as any).$t('user.desktopUserBatchDeleteTitle');
          break;
        case 'system_manager': return (this as any).$t('user.systemManagerBatchDeleteTitle');
          break;
        case 'tenant_manager': return (this as any).$t('user.tenantManagerBatchDeleteTitle');
          break;
        default:
          return ""
      }
    },
    title() {
      switch((this as any).type) {
        case 'desktop_user': 
          return (this as any).$t('user.deleteDesktopUser');
        case 'system_manager': return (this as any).$t('user.deleteSystem');
        case 'tenant_manager': return (this as any).$t('user.deleteTenant');
        default:
          return ""
      }
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
          let successMessage = this.$t('desktopManage.message.operationSuccess', { operation: (this as any).title()}).toString();
          let failMessage = this.$t('desktopManage.message.operationFail', { operation: (this as any).title()}).toString();
          (this as any).loading = true;
          (this as any).deleteMethod((this as any).itemList).then(() => {
            (this as any).handleClose();
            this.$message({
              message: successMessage,
              type: 'success'
            });
          }).catch(() => {
            (this as any).loading = false;
            this.$message({
                message: failMessage,
                type: 'warning'
            });
          });
        }
      });
    },
    handleClose() {
      (this as any).loading = false;
      (this as any).visible = false;
      (this as any).type = "";
      (this as any).itemList = [];
    }
  }
})
</script>
<style lang="scss" scoped>

</style>